<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>挂号信息</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
<div class="ui container">
    <!-- 搜索框 -->
    <div class="ui segment" style="margin-top: 20px">
        <form class="ui form" th:action="@{/getRegistrationById}" method="get">
            <div class="fields">
                <div class="four wide field">
                    <label>按挂号ID搜索</label>
                    <div class="ui left icon input">
                        <i class="search icon"></i>
                        <input type="text" name="id" placeholder="输入挂号ID">
                    </div>
                </div>
                <div class="field" style="align-self: flex-end;">
                    <button type="submit" class="ui primary button">搜索</button>
                    <a th:href="@{/listRegistrationByPatientId}" class="ui button">重置</a>
                </div>
            </div>
        </form>
    </div>

    <!-- 挂号信息表格 -->
    <table class="ui celled attached table" style="margin-top: 20px !important;">
        <thead>
        <tr>
            <th>挂号ID</th>
            <th>患者ID</th>
            <th>挂号时间</th>
            <th>症状描述</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr th:if="${#lists.isEmpty(page.list)}">
            <td colspan="5" class="ui center aligned">暂无数据</td>
        </tr>
        <tr th:each="registration : ${page.list}">
            <td th:text="${registration.id}">R1001</td>
            <td th:text="${registration.patient_id}">P1001</td>
            <td th:text="${#dates.format(registration.register_time, 'yyyy-MM-dd HH:mm')} ?: '-'">2025-04-01 09:00</td>
            <td th:text="${registration.symptoms} ?: '暂无'">头痛</td>
            <td th:text="${registration.status} ?: '暂无'">已处理</td>
        </tr>
        </tbody>
    </table>

    <!-- 分页组件 -->
    <div class="ui attached segment">
        <table class="m-mobile-wide" width="425px">
            <tbody>
            <tr align="center">
                <td>
                    <a th:href="@{/listRegistrationByPatientId(pageNum=${page.pageNum}-1, registrationId=${param.registrationId})}"
                       class="ui button basic mini"
                       th:unless="${page.isFirstPage}">上一页</a>
                </td>
                <td>
                    第
                    <h8 th:text="${page.pageNum}">1</h8>
                    页/共
                    <h8 th:text="${page.pages}">4</h8>
                    页
                    共
                    <h8 th:text="${page.total}">29</h8>
                    条
                </td>
                <td>
                    <form name="pageForm" th:action="@{/listRegistrationByPatientId}" method="get">
                        <input type="hidden" name="registrationId" th:value="${param.registrationId}">
                        <div class="ui mini input">
                            <input type="text" class="m-bg" name="pageNum" placeholder="页码"
                                   style="width: 50px!important; height: 27.76px!important;" required>
                            <button type="submit" style="font-size: 11px!important;width: 30px!important;
                                   height: 0!important; border: none;margin: 5px;padding: 0;"
                                    class="button mini">
                                跳转
                            </button>
                        </div>
                    </form>
                </td>
                <td>&nbsp;</td>
                <td style="float: right">
                    <a th:href="@{/listRegistrationByPatientId(pageNum=${page.pageNum}+1, registrationId=${param.registrationId})}"
                       class="ui button basic mini" style="float: right;"
                       th:unless="${page.isLastPage}">下一页</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 提示消息 -->
    <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
        <i class="close icon"></i>
        <div class="header">提示：</div>
        <p th:text="${message}"></p>
    </div>
</div>

<!-- 引入 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>
    $(".message .close").on('click', function () {
        $(this).closest(".message").transition("fade");
    })
</script>
</body>
</html>
